<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <script src="../jquery-color-master/jquery.color.js"></script>
    <script src="../jquery-color-master/jquery.color.svg-names.js"></script>
    <title>遮罩层</title>
    <style>
       body{
           background-color: lightgray;
       }
       /*上方图片*/
       .top{
           width: 400px;
           margin: 0 auto;
           text-align: center;
           margin-top: 20px;
       }
       .outer{
           width: 400px;
           text-align: center;
           background-color: white;
           /*border: 5px solid white;*/
           cursor: pointer;
           transition: border 1s;
           padding: 3px;
           padding-bottom: 5px;
           padding-top: 2px;
           
       }
       
       .outer img{
           width: 380px;
           height: 450px;
           display: inline-block;
           margin-top: 5px;
           padding-left: 6px;
           padding-right: 5px;
           padding-top: 5px;
           background-color: white;
       }
       .outer span{
           display: block;
           width: 351px;
           font-size: 13px;
           line-height: 1.5;
           padding: 20px;
           margin-top: -5px;
           margin-left: 5px;
           background-color: white;
           
       }
       
       /*下方图片*/
       .bottom{
           width: 400px;
           margin: 0 auto;
           margin-top: 10px;
        }
       .outer2{
           width: 395px;
           text-align: center;
           background-color: white;
           border: 5px solid white;
       }

       .inner{
           width: 190px;
           float: left;
           margin-left: 5px;
           cursor: pointer;
           position: relative;
           overflow: hidden;
       }
       
       .inner:nth-of-type(2){
            margin-left: 10px;
       }
       .inner:nth-of-type(1){
            margin-left: 3px;
       }
       .inner img{
           width: 190px;
           height: 190px;
           margin-top: 5px;
           margin-bottom: 3px;
       }
        
        /*两个动态元素*/
      /*遮罩层*/
       .bottom .outer2 .overlay{
           position: absolute;
            width: 190px;
            height: 190px;
            background-color: #000;
            top: 5px;
            left: 0;
            opacity: 0;
       }
       /*文字*/
       .bottom .outer2 span{
           width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -110%;
            padding: 50px 0;
            font-size: 13px;
            line-height: 20px;
            color: white;
       }
    </style>
</head>

<body>
    <section class="top">
        <div class="outer">
            <img src="img/2.JPG" alt="">
            <span>【文字】是人类用来交流的符号系统，是纪录思想和事件的书写形式。一般认为，文字是一个民族进入文明社会的重要标志。马克思主义的观点则认为文字是在阶级社会产生以后才产生的。文字在发展早期都是图画形式的表意文字发展到后期，绝大部分演化为记录语音的表音文字。</span>
        </div>

    </section>

    <section class="bottom">
        <div class="outer2">
            <div class="inner">
              <img src="img/1.JPG" alt="">
              <div class="overlay"></div>
              <span>忍别人所不能忍的痛，吃别人所别人所不能吃的苦，是为了收获得不到的收获。</span>
            </div>

            <div class="inner">
               <img src="img/4.JPG" alt="">
               <div class="overlay"></div>
                <span>你现在所做的是改变现状的关键。–《黑鹰降落》，杰夫-(布莱恩-范-霍尔特)</span>
            </div>
           <div style="clear: both"></div>
        </div>
        
    </section>

</body>
    
    
</html>
<script>
//    top
// 光标进入 与移出 .outer时改编背景颜色 
    $('.outer').hover(function(){
        console.log('1221');
        $(this).stop().animate({
         backgroundColor:'darkslategray',
          
        },600);
    },function(){
         $(this).stop().animate({
          backgroundColor:'white',
          
         },600);
    });
    // bottom
    //  光标进入  与 离开.inner 改变遮罩层的透明度
    // 与文字标签的位置
    $('.bottom .outer2 .inner').hover(function(){
        $(this).find('.overlay').stop().animate({
          opacity:0.5
        },200);
        $(this).find('span').stop().animate({
            left:0
        },200);
    },function(){
         $(this).find('.overlay').stop().animate({
          
          opacity:0
          
        },200);
        $(this).find('span').stop().animate({
            left:-210
        },200);
    });


</script>